<template>
	<div class="wraps">
		<h1 class="text-30px">CRUD实现</h1>
		<div>
			<el-input v-model="search.keyWord" style="width: 300px"></el-input>
			<el-button @click="init" style="margin-left: 10px">搜索</el-button>
			<el-button @click="openDialog" type="primary" style="margin-left: 10px">添加</el-button>
		</div>
		<el-table border :data="tableData" style="width: 100%; margin-top: 30px">
			<el-table-column prop="name" label="名字" />
			<el-table-column prop="age" label="年龄" />
			<el-table-column prop="id" label="id" />
			<el-table-column label="标签">
				<template #default="scope">
					<el-tag v-for="(tag, index) in scope.row.tags" :key="index" class="mr-10px" type="success">{{
						tag.tags
					}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column>
				<template #default="scope">
					<el-button @click="edit(scope.row)">编辑</el-button>
					<el-button @click="deleteRow(scope.row)">删除</el-button>
					<el-button @click="(isShowTag = true), (row = scope.row)">添加tag</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@current-change="changeSize"
			style="float: right; margin-top: 10px"
			background
			layout="prev, pager, next"
			:total="total"
		/>
	</div>

	<el-dialog v-model="dialogVisible" title="弹框" width="50%">
		<el-form :model="form">
			<el-form-item prop="name" label="名称">
				<el-input v-model="form.name" placeholder="名称" />
			</el-form-item>
			<el-form-item prop="age" label="年龄">
				<el-input v-model="form.age" placeholder="年龄"> </el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="close">关闭</el-button>
				<el-button type="primary" @click="save"> 保存 </el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog v-model="isShowTag" title="添加tag">
		<el-select style="width: 100%" v-model="tags" multiple>
			<el-option value="tag1">tag1</el-option>
			<el-option value="tag2">tag2</el-option>
			<el-option value="tag3">tag3</el-option>
		</el-select>
		<template #footer>
			<el-button @click="addTa" type="primary">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
const inputValue = ref('1')
import { addUser, updateUser, delUser, getList, addTags } from '@/server/user'
const isShowTag = ref(false)

const baseInputRef = ref(null)

const tags = ref([])

const row = ref({
	id: '',
	name: '',
	age: 0,
	createTime: ''
})
const getInputName = () => {
	if (baseInputRef.value) {
		console.log('name', baseInputRef.value.$options.name) // 获取并输出子组件的 name
	}
}

const total = ref(0)
//搜索框
const search = reactive({
	keyWord: '',
	page: 1,
	pageSize: 10
})
//表单
const form = reactive({
	name: '',
	age: '',
	id: 0
})
//清空数据
const resetForm = reactive({ ...form })
//表格数据
const tableData = ref([])
//弹框开关
const dialogVisible = ref(false)
const openDialog = () => {
	dialogVisible.value = true
	Object.assign(form, resetForm)
}
//初始化表格数据
const init = async () => {
	const list = await getList(search)
	tableData.value = list?.data ?? []
	total.value = list?.total ?? 0
}
init()
const changeSize = (page) => {
	search.page = page
	init()
}
//保存 和修改 表格数据
const save = async () => {
	if (form.id) {
		await updateUser(form)
	} else {
		await addUser(form)
	}

	close()
	init()
}
//删除表格数据
const deleteRow = async (row) => {
	await delUser({ id: row.id })
	init()
}
//获取 详情
const edit = (row) => {
	dialogVisible.value = true
	Object.assign(form, row)
}
//关闭弹框
const close = () => {
	dialogVisible.value = false
}

const addTa = async () => {
	await addTags({
		tags: tags.value,
		userId: row.value.id
	})
	isShowTag.value = false
	tags.value = []
	init()
}
</script>

<style>
.wraps {
	height: 100vh;
	padding: 30px;
}
</style>
